<script setup lang="ts">
import { ref, computed, unref, h, toRaw, reactive, type PropType, watch } from 'vue';
import { List, ListItem, ListItemMeta, Avatar, Button } from 'ant-design-vue';
import type { Recordable } from "@vben/types";
import CommentModal from './CommentModal.vue';
import { commentList, addComment, addYwComment } from '@/api/sys/approval';
import { useModal } from "@/components/Modal";

const emit = defineEmits(['success', 'register']);

const loading = ref(false);
const isFirstLoaded = ref<Boolean>(false);
const dataList = ref([]);
const [register, { openModal, closeModal }] = useModal();

defineOptions({ name: 'approverLogComment' });
const props = defineProps({
  approveNo: { type: String, default: "" },
  approvalLogId: { type: String, default: "" },
  api: { type: Function as PropType<(arg?: any) => Promise<Recordable<any>>> },
});



watch(
  () => props.approvalLogId,
  (v) => {

    if (v) {
      initFn();
    }
  },
  { deep: true },
);

const page = ref(1);
const pageSize = ref(10);
const total = ref(0);
function initFn() {
  page.value = 1;
  fetch();
}

const pagination = ref(
  {
    onChange: (p: number) => {
      page.value = p;
      fetch();
    },
    total: total.value,
    pageSize: pageSize.value,
  }
);

function reloadFn() {
  initFn();
}

function handleSuccess() {
  fetch();
}

async function fetch() {
  let { approveNo, approvalLogId } = props;
  if (loading.value) return;
  loading.value = true;
  let res;
  let params = {
    dataId: approvalLogId,
    page: page.value,
    pageSize: pageSize.value,
  }
  try {

    res = await commentList(params);

    dataList.value = res.data.list;
    // console.log("--dataList:",dataList.value)
    pagination.value.total = res.data.totalResult;
  } catch (e) {
    console.error(e);
  }
  loading.value = false;
  if (!res) return;

  isFirstLoaded.value = true;
}

function t_paseTags(row) {
  let color = '';
  switch (row.comment) {
    case '撤回审批':
      color = 'orange';
      break;
    case "同意":
      color = 'green';
      break;
    case "驳回":
      color = 'red';
      break;
  }
  return color
}

function openAddFn() {
  openModal(true, {
    isUpdate: false,
  });
}

defineExpose({
  reloadFn,
})

</script>

<template>
  <div style="height: 250px;overflow-y: auto;">
    <!--    size="small"-->
    <list item-layout="vertical" :loading="loading" size="small" :pagination="pagination" :data-source="dataList">
      <template #renderItem="{ item }">
        <ListItem key="{{item.id}}" size="small">

          <template #extra>
            <div style="color: gray;font-size: 12px;">{{ item.createTime }}</div>
          </template>
          <!--          :description="item.comment"-->
          <ListItemMeta>
            <template #title>
              <div :style="{ color: t_paseTags(item) }" v-html="item.comment"></div>

            </template>
            <template #avatar>
              <Avatar style="background-color: #1890ff">{{ item.userName.split("")[0] }}</Avatar><span
                style="padding-left: 5px">{{ item.userName }}</span>
            </template>
          </ListItemMeta>
        </ListItem>
      </template>
    </list>
    <Button type="primary" size="small" @click="openAddFn">添加评论</Button>
    <CommentModal @register="register" @success="handleSuccess" :approveNo="props.approveNo" :api="addYwComment">
    </CommentModal>
  </div>
</template>

<style scoped lang="less">
.ant-list-vertical {
  .ant-list-item {
    .ant-list-item-meta {
      margin-block-end: 0;
    }
  }
}

.ant-list-sm {
  .ant-list-item {
    padding: unset;
  }
}
</style>
